<template>
	<view class="page">
		<view class="patientList">
			<view class="card-main" v-for="(item, i) in patientList" :key='i' @click="goToChat(item)">
				<view class="card-left"> <u-avatar mode='circle' bg-color='#e6e6e6' :text="item.sex == 1 ? '男' : '女'">
					</u-avatar>
				</view>

				<view class="card-right">
					<view class="">
						<text class="info-title">{{ item.name }}</text>
						<text class="dept-info">{{ item.sex == 1 ? '男' : '女'}} | {{ item.age }}岁</text>
						<text class="text-type">{{item.type }} </text>
					</view>
					<view class="text-desc">
						{{item.tips}}
					</view>
					<view class="info-time">{{item.time}}</view>


				</view>
				<view class="right-info">
					<image v-if="item.state==='待接诊'" src="../../static/images/dz.png" class="state-img"></image>
					<image v-if="item.state==='问诊中'" src="../../static/images/dz.png" class="state-img"></image>
					<image v-if="item.state==='已结束'" src="../../static/images/dz.png" class="state-img"></image>
					<image v-if="item.state==='已取消'" src="../../static/images/dz.png" class="state-img"></image>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['hostApi']),
		},
		data() {
			return {
				// 公告
				deptType: [{
					name: '全部',
				}, {
					name: '待接诊'
				}, {
					name: '问诊中'
				}, {
					name: '已结束'
				}, {
					name: '已取消'
				}, ],
				patientList: [{
						name: '张三',
						sex: 1,
						age: 39,
						type: '首次问诊-语音',
						state: '问诊中',
						time: '2025-08-09 20:34:44',
						tips: '后续注意事项sdasdasdsadasdqwesjidhlaasdashdoas赛迪卡迪啊实打实大大'
					},
					{
						name: '理想',
						sex: 0,
						age: 25,
						type: '在线复诊-图文',
						state: '已结束',
						time: '2025-08-10 20:34:44',
						tips: '后续注意事项'
					},
					{
						name: '张飞',
						sex: 1,
						age: 46,
						type: '首次问诊-图文',
						state: '已取消',
						time: '2025-08-09 20:34:44',
						tips: '后续注意事项'
					},
				],
				barStyle: {
					"bottom": "5px",
					"background-color": "#41CFE6",
				}
			}
		},
		mounted() {

		},
		methods: {
			goToChat(item) {
				uni.$u.route('/pages/department/MedicalConsultation', item);
			}

		}
	};
</script>

<style scoped>
	.patientList {
		background: linear-gradient(#e0f3ff 0%, #fff 50%);
		min-height: 100vh;
		padding: 20rpx;
	}

	.header-img {
		margin-top: 48rpx;
		height: 104rpx;
		width: 104rpx;
		border-radius: 104rpx;
	}

	.card-main {
		display: flex;
		justify-content: space-between;
		height: 198rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.07);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		margin-top: 32rpx;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.card-left {
		padding: 24rpx;
		width: 120rpx;
	}

	.card-right {
		padding: 24rpx;
	}

	.info-title {
		width: 64rpx;
		height: 30rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		line-height: 30rpx;

	}

	.text-type {
		width: 128rpx;
		height: 32rpx;
		font-size: 20rpx;
		color: #2E6D78;
		line-height: 32rpx;
		padding: 8rpx;
		border-radius: 40rpx;
		background-color: #E7F7FD;
	}

	.dept-info {
		height: 24rpx;
		font-size: 24rpx;
		color: #666666;
		line-height: 24rpx;
		margin-left: 16rpx;
		margin-right: 32rpx;
	}

	.info-time {
		height: 30rpx;
		font-size: 24rpx;
		color: #999999;
		line-height: 30rpx;
		margin-top: 16rpx;
	}


	.text-desc {
		height: 30rpx;
		font-size: 26rpx;
		color: #666666;
		line-height: 30rpx;
		text-align: left;
		width: 50vw;
		margin-top: 26rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.state-img {
		width: 124rpx;
		height: 42rpx;
	}
</style>